<style lang="scss">
    #dragBar {
        width: 7px;
        background: url() center center no-repeat;
        background-color: #eee;
    }
</style>
<template>
    <div class="ui-split ui flex column item one">
        <div ref="cont" class="ui item one flex">
            <ui-split-screen-cont :left="left">
                <slot name="left"></slot>
            </ui-split-screen-cont>
            <ui-split-screen-cont :right="right">
                <slot name="right"></slot>
            </ui-split-screen-cont>
        </div>
    </div>
</template>
<script>
    export default {
        name:'ui-split-screen',
        props:{
            left:String,
            right:String,
            disable:{
                type: Boolean,
                default:false
            }
        },
        mounted() {
            const el = this.$refs;
            const dragBarHtml = `<div id="dragBar" class="item" style="cursor:${this.disable ?'default':'e-resize'}"></div>`;
            const $leftCont = el.cont.children[0];
            const $allPage = document.body.parentElement;
            //插入分割栏
            $leftCont.insertAdjacentHTML('afterend', dragBarHtml);
            //给分割栏绑定事件
            if(this.disable) return
            const that = this, $dragBar = el.cont.children[1];
            $dragBar.onmousedown = function(e) {
                e.preventDefault();
                e.stopPropagation();
                //获取左边容器的左边距离
                let left = that.offset($leftCont).left + 4;
                //拖动后赋值
                $allPage.onmousemove = function(event) {
                    $leftCont.style.width = event.pageX - left + 'px';
                };
            };
            //解除事件
            $allPage.onmouseup = function() {
                $allPage.onmousemove = null;
            }
        },
        methods:{
            /*retreat() {
                console.warn('退后功能我还没写');
            },*/
            offset(element) {
                let rawDomNode = element;
                let body = document.documentElement || document.body;
                let scrollX = window.pageXOffset || body.scrollLeft;
                let scrollY = window.pageYOffset || body.scrollTop;
                let clientRect = rawDomNode.getBoundingClientRect();
                let x = clientRect.left + scrollX;
                let y = clientRect.top + scrollY;
                return { left:x, top:y };
            }
        }
    }
</script>


